



<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<!-- 引入样式文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.11/lib/index.css"/>
	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.11/lib/vant.min.js"></script>
	
	
	<style>
	  .my-swipe .van-swipe-item {
	    color: #fff;
	    font-size: 20px;
	    line-height: 150px;
	    text-align: center;
	    background-color: #39a9ed;
			/* height:100vh; */
	  }
	</style>
	
	
	
</head>
<body>
	<div id="app">
		
		<van-swipe class="my-swipe" vertical style="height:100vh;" :initial-swipe="initialIndex" 
		:loop="false" indicator-color="white" @change="onChange">
			<van-swipe-item v-for="(item,index) in videoList" :key="index">
<!-- {{item.name}} -->
	<!-- 			<button type="button"  @click="playVideo(index)">播放</button>
				<button type="button"  @click="pauseVideo(index)">暂停</button> -->
				<video width="100%" height="400px" controls :class="'video'+index">
					<source
					src="https://vd3.bdstatic.com/mda-kkcmznvwbvffb3zu/cae_h264_clips/1605254141/mda-kkcmznvwbvffb3zu.mp4" 
					type="video/mp4">
				</video>
				
			</van-swipe-item>
<!-- 			<van-swipe-item>2</van-swipe-item>
			<van-swipe-item>3</van-swipe-item>
			<van-swipe-item>4</van-swipe-item> -->
		</van-swipe>
	</div>
</body>

<script>
  // 在 #app 标签下渲染一个按钮组件
  new Vue({
    el: '#app',
		data:{
			videoIndex:1,
			initialIndex:0,
			videoList:[
				{name:"视频1"},
				{name:"视频2"},
				{name:"视频3"},
				{name:"视频4"},
				{name:"视频5"},
			]
		},
		mounted(){
			// this.playVideo(0); //打开本页面播放
		},
		methods:{
			playVideo:function(index){
			//播放视频
				this.$nextTick(()=>{
					var videoNode = document.querySelector('.video'+index);
					videoNode.play();
					console.log(videoNode,'videoNode','video'+index);
				})
			},
			pauseVideo:function(index){
			//暂停视频
				this.$nextTick(()=>{
					var videoNode = document.querySelector('.video'+index);
					videoNode.pause();
					console.log(videoNode,'videoNode','video'+index);
				})
			},
			onChange:function(index){
				var newindex = index+1;
				var videoListLen = parseInt(this.videoList.length);
				var extend = 2;//延长时间
				
				
				
				
				if(this.videoIndex < newindex){
					console.log('下翻页');
					
					this.pauseVideo(index - 1); //关闭上一个播放
					this.playVideo(index); //打开本页面播放
					
					setTimeout(()=>{
						// console.log(index+extend,videoListLen);
						if(videoListLen == (index+extend)){
							this.videoList.push({name:'视频' + (videoListLen+1)});
							this.initialIndex = index;
						}
					},200)
				}else{
					console.log('上翻页');
					
					this.pauseVideo(index + 1); //关闭下一个播放
					this.playVideo(index); //打开本页面播放
					
				}

				this.videoIndex = newindex;
				
				// console.log('触发',newindex)
				//this.videoList
			}
		}
  });

</script>
</html>